<script setup>
import {onMounted, ref} from 'vue';
import {ElCarousel, ElCarouselItem, ElInput, ElMessage} from 'element-plus';
import router from "@/router/index.js";
import http from "@/request/http.js";
import {
  ChatDotRound,
  Delete,
  EditPen,
  PieChart,
  Search,
  Setting,
  SwitchButton,
  User,
  View
} from "@element-plus/icons-vue";
import HeartIcon from "@/component/icon/HeartIcon.vue";
import {debounce} from "chart.js/helpers";


// 登录状态
const isLoggedIn = ref(false);
let role = 0;
const userInfo = ref({})
// 首页广告
const homeAds = ref([]);
// 登录后广告
const loggedAds = ref([]);
const adsLoading = ref(false);

// 获取首页广告
const fetchHomeAds = async () => {
  adsLoading.value = true;
  const response = await http.get('/ads/homeAds');
  if (response.code === 200) {
    homeAds.value = response.data;
  }
};

// 获取登录用户广告
const fetchLoggedAds = async () => {
  if (!isLoggedIn.value) return;

  try {
    const response = await http.get('/ads/loggedAds');
    if (response.code === 200) {
      loggedAds.value = response.data;
    }
  } catch (error) {
    console.error('获取登录广告失败:', error);
  }
};


// 在广告组件显示时记录曝光
const recordAdImpression = async (ad) => {
  try {
    await http.post('/ads/recordImpression', {
      adId: ad.id,
      adType: ad.adType,
      position: ad.position
    });
  } catch (error) {
    console.error('记录广告曝光失败:', error);
  }
};

// 在轮播组件中添加曝光记录
const handleCarouselChange = (currentIndex) => {
  if (homeAds.value.length > 0) {
    const currentAd = homeAds.value[currentIndex];
    recordAdImpression(currentAd);
  }
};

// 侧边栏轮播切换
const handleSidebarCarouselChange = (currentIndex) => {
  if (loggedAds.value.length > 0 && currentIndex >= 0) {
    const currentAd = loggedAds.value[currentIndex];
    recordAdImpression(currentAd);
  }
};

// 处理广告点击
const handleAdClick = async (ad) => {
  // 记录点击统计
  try {
    await http.post('/ads/recordClick', {
      adId: ad.id,
      adType: ad.adType,
      position: ad.position
    });
  } catch (error) {
    console.error('记录广告点击失败:', error);
  }

  // 跳转到广告链接
  if (ad.linkUrl) {
    window.open(ad.linkUrl, '_blank');
  }
};

// 响应式数据
const searchQuery = ref('');
const email = ref('');
const loginOutDialogVisible = ref(false)

//=========================== 文章数据 ===========================

// 新增加载状态
const isLoading = ref(false);

// 文章数据
const articles = ref([]);
//文章类型
const categories = ref([]);
let nowCategory = [];

const currentPage = ref(1); // 当前页码，初始为1
const pageSize = ref(10); // 每页条数
const hasMore = ref(true); // 是否还有更多数据

// 加载分类列表
const loadCategories = async () => {
  const response = await http.get('/article/getCategories');
  if (response.code === 200) {
    categories.value = response.data;
  } else {
    ElMessage.error('加载分类失败: ' + response.msg);
  }
};

//点击板块后重新加载
const fresh = async (category) => {
  console.log(nowCategory, category)
  if (nowCategory[0] === category[0]) {
    return
  }
  //特判一下选择全部
  if (category[0] === 'all') {
    nowCategory = []
  } else {
    nowCategory = category
  }

  articles.value = []
  currentPage.value = 0
  hasMore.value = true
  await loadMore()
  await loadMore()
}

//防抖函数，防刁民疯狂点击
const debouncedHandle = debounce(fresh, 400);

//请求资源
const fetchArticles = async (page) => {
  try {
    const res = await http.post('/article/getHotList', {
        currentPage: page,
      pageSize: pageSize.value,
      categories: nowCategory
    });
    if (res.code === 200) {
      const {records, pages} = res.data;
      if (page === 1) {
        articles.value = records;  // 替换第一页数据
      } else {
        articles.value = [...articles.value, ...records];  // 追加后续页数据
      }
      hasMore.value = page < pages;  // 判断是否还有下一页
      return true;
    }
  } catch (err) {
    ElMessage.error('加载文章失败：', err);
  }
  return false;
};

// 新增：加载更多（页码+1）
const loadMore = async () => {
  if (!hasMore.value) return; // 没有更多数据则终止
  if (isLoading.value) return false; // 如果正在加载，直接返回
  isLoading.value = true; // 开始加载，上锁
  const nextPage = currentPage.value + 1;
  const success = await fetchArticles(nextPage);
  if (success) {
    currentPage.value = nextPage; // 成功后更新当前页码
  } else {
    //加载失败说明服务器返回文章失败，当作没有后续文章处理
    hasMore.value = false;
  }
  isLoading.value = false;
};

// 条件博主数据
const bloggers = ref([
  {
    name: '架构师之路',
    avatar: 'https://seecen-devplatform.oss-cn-hangzhou.aliyuncs.com/1973702937159802881/2025-10-05_10:43:06图片.png',
    specialty: '系统架构、Java、微服务',
  },
  {
    name: '前端开发笔记',
    avatar: 'https://seecen-devplatform.oss-cn-hangzhou.aliyuncs.com/1973702937159802881/2025-10-05_10:43:06图片.png',
    specialty: 'JavaScript、Vue、React',
  },
  {
    name: 'Python爱好者',
    avatar: 'https://seecen-devplatform.oss-cn-hangzhou.aliyuncs.com/1973702937159802881/2025-10-05_10:43:06图片.png',
    specialty: 'Python、机器学习、数据分析',
  },
  {
    name: '数据库专家',
    avatar: 'https://seecen-devplatform.oss-cn-hangzhou.aliyuncs.com/1973702937159802881/2025-10-05_10:43:06图片.png',
    specialty: 'MySQL、Redis、MongoDB',
  },
]);

// 钩子函数
onMounted(() => {
  //获取用户是否登录
  let isLogin = sessionStorage.getItem("isLogged")
  isLoggedIn.value = isLogin !== null ? isLogin === "true" : false;
  if (isLoggedIn.value) {
    getUserInfo()
    role = parseInt(sessionStorage.getItem('role'))
  }

  //获取分类数据
  loadCategories()

  // 新增：加载第一页文章
  fetchArticles(1).then(success => {
    if (success) {
      currentPage.value = 1;
    }
  });

  // 获取广告数据
  fetchHomeAds();
  if (isLoggedIn.value) {
    fetchLoggedAds();
  }
});

//获取用户信息
const getUserInfo = async () => {
  const response = await http.get('/user/userInfo')
  if (response.code === 200) {
    userInfo.value = response.data
  }
}

//===================================广告部分==================================
//广告关闭状态
const isLoginAdClosed = ref(localStorage.getItem('loginAdClosed') === true);
const isMainAdClosed = ref(localStorage.getItem('mainAdClosed') === true);

// 关闭广告
const closeMainAd = () => {
  isMainAdClosed.value = true;
  localStorage.setItem('mainAdClosed', 'true')
}

const closeLoginAd = () => {
  isLoginAdClosed.value = true;
  localStorage.setItem('loginAdClosed', 'true');
};

//===========================头像功能列表====================================
//我的主页跳转

const avatarMenuVisible = ref(false)
//浏览记录
const readeHistoryVisible = ref(false)
//退出登录
const loginOut = () => {
  loginOutDialogVisible.value = false
  sessionStorage.removeItem("token")
  sessionStorage.removeItem("isLogged")
  userInfo.value = null
  isLoggedIn.value = false
  ElMessage.success("已退出登录")
}

//===========================历史记录=======================================
const readeHistoryList = ref([])
const searchTitle = ref('')

//向后端获取记录
const getReadeHistory = async () => {
  const resp = await http.get(`/article/readeHistory?title=${searchTitle.value}`)
  if (resp.code === 200) {
    readeHistoryList.value = resp.data
  }
}
//删除记录
const deleteReadeHistory = async () => {
  const resp = await http.delete('/article/readeHistory')
  if (resp.code === 200) {
    ElMessage.success("删除成功");
    await getReadeHistory()
  } else {
    ElMessage.error(resp.msg)
  }
}
</script>

<template>
  <!--主内容区域-->
  <div class="min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header
        class="sticky top-0 z-50 bg-white shadow-md transition-all duration-300"
    >
      <div class="container mx-auto px-4">
        <!-- 主导航栏 -->
        <div class="flex items-center justify-between h-16">
          <!-- Logo -->
          <div class="flex items-center">
            <a class="text-2xl font-bold text-blue-600 flex items-center" href="/">
              <i class="fa fa-code mr-2"></i>
              <span>DevPlatform</span>
            </a>
          </div>

          <!-- 搜索框 -->
          <div class="hidden md:flex items-center flex-1 max-w-xl mx-8">
            <el-input
                v-model="searchQuery"
                class="w-full"
                clearable
                font-bold="font-bold"
                placeholder="搜索文章标题、作者"
                @keydown.enter="router.push({path:'/search',query:{key:searchQuery}})"
                size="large"
            >
              <template #prefix>
                <el-icon>
                  <Search/>
                </el-icon>
              </template>
            </el-input>
          </div>

          <!-- 登录 -->
          <div v-if="!isLoggedIn" class="flex items-end space-x-4">
            <router-link to="/login">
              <a class="text-gray-500 hover:text-blue-600 transition-colors">
                登录
              </a>
            </router-link>
            <router-link to="/register">
              <a class="text-gray-500 hover:text-blue-600 transition-colors">
                注册
              </a>
            </router-link>
          </div>
          <!--头像功能区-->
          <div v-if="isLoggedIn"
               class="avatar-div"
               @mouseenter="avatarMenuVisible=true"
               @mouseleave="avatarMenuVisible=false">
            <el-avatar :src="userInfo.avatar"
                       class="avatar"
                       fit="cover"
                       @click="router.push(`/MyHomePage?userId=${userInfo.userId}`)"
            />
            <span class="text-base ml-5 text-gray-600">您好，{{ userInfo.username }}</span>
            <el-menu v-show="avatarMenuVisible" class="avatar-menu" mode="vertical">
              <el-menu-item @click="router.push('/userInfo')">
                <el-icon>
                  <User/>
                </el-icon>
                <span>个人中心</span>
              </el-menu-item>
              <el-menu-item v-show="role>=3" @click="router.push('/system')">
                <el-icon>
                  <Setting/>
                </el-icon>
                <span>平台管理系统</span>
              </el-menu-item>
              <el-menu-item v-show="role>=2" @click="router.push('/adManagement')">
                <el-icon>
                  <PieChart/>
                </el-icon>
                <span>广告投放</span>
              </el-menu-item>
              <!--              <el-menu-item index="2">-->
              <!--                <el-icon>-->
              <!--                  <Star/>-->
              <!--                </el-icon>-->
              <!--                <span>收藏</span>-->
              <!--              </el-menu-item>-->
              <!--              <el-menu-item index="3">-->
              <!--                <el-icon>-->
              <!--                  <HeartIcon size="20"/>-->
              <!--                </el-icon>-->
              <!--                <span>喜欢</span>-->
              <!--              </el-menu-item>-->
              <el-menu-item @click="readeHistoryVisible=true">
                <el-icon>
                  <View/>
                </el-icon>
                <span>历史记录</span>
              </el-menu-item>
              <el-menu-item @click="loginOutDialogVisible=true">
                <el-icon>
                      <SwitchButton/>
                    </el-icon>
                <span>退出登录</span>
              </el-menu-item>
              <el-dialog v-model="loginOutDialogVisible" :modal="true" title="确认退出登录？" width="30%">
                <template #footer>
                  <div class="dialog-footer">
                    <el-button @click="loginOutDialogVisible = false">取消</el-button>
                    <el-button type="danger" @click="loginOut">
                      确认
                    </el-button>
                  </div>
                </template>
              </el-dialog>
            </el-menu>
          </div>

          <!-- 右侧功能区 -->
          <div class="flex items-center space-x-4">
            <button
                class="hidden md:block bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded-md transition-colors"
                @click="router.push('/articleEditor')"
            >
              <i class="fa fa-pencil mr-1"/>
              <el-icon>
                <EditPen/>
              </el-icon>
              发布
            </button>
          </div>
        </div>

      </div>
    </header>

    <!-- 横幅广告 -->
    <div v-if="!isMainAdClosed && homeAds.length > 0" class="ad-container bg-blue-50 py-4">
      <div class="container mx-auto px-4">
        <!-- 轮播容器：设置自动播放、指示器、切换箭头 -->
        <el-carousel
            height="220px"
            :autoplay="true"
            :interval="5000"
            indicator-position="outside"
            arrow="always"
            @change="handleCarouselChange"
        >
          <!-- 循环渲染每一条广告作为轮播项 -->
          <el-carousel-item v-for="ad in homeAds" :key="ad.id">
            <div class="bg-gradient-to-r from-blue-600 to-blue-400 rounded-lg overflow-hidden relative h-full">
              <!-- 广告标签和关闭按钮 -->
              <div class="absolute top-2 right-2 flex items-center gap-1 z-20">
                <div class="ad-label bg-gray-800 text-white text-xs px-2 py-1 rounded">广告</div>
                <div
                    class="close-btn cursor-pointer hover:bg-black/20 p-1 rounded-full transition-colors"
                    @click="closeMainAd"
                >
                  <svg fill="currentColor" height="16" viewBox="0 0 16 16" width="16"
                       xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
                  </svg>
                </div>
              </div>

              <!-- 广告背景（保持不变） -->
              <div class="absolute inset-0 opacity-10">
                <div class="absolute inset-0 bg-gradient-to-r from-blue-700 to-blue-500 bg-cover bg-center"></div>
              </div>

              <!-- 广告内容 -->
              <div
                  class="relative z-10 flex flex-col md:flex-row items-center justify-between p-6 md:p-8 h-full"
                  @click="handleAdClick(ad)"
              >
                <div class="text-white mb-4 md:mb-0">
                  <h3 class="text-xl md:text-2xl font-bold mb-2">{{ ad.title }}</h3>
                  <p class="opacity-90">{{ ad.description }}</p>
                </div>
                <button
                    class="bg-white text-blue-600 hover:bg-gray-100 px-6 py-2 rounded-md font-medium transition-colors">
                  {{ ad.buttonText || '点击了解' }}
                </button>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>

    <!-- 主内容区 -->
    <main class="flex-1 container mx-auto px-4 py-6">
      <div class="flex flex-col lg:flex-row gap-6">
        <!-- 左侧内容区 -->
        <div class="lg:w-2/3">
          <!-- 分类导航 -->
          <div
              class="bg-white rounded-lg shadow-sm p-4 mb-6 overflow-x-auto"
          >
            <div class="flex space-x-1 md:space-x-4 min-w-max">
              <button :class="nowCategory.length===0?'now-category-button':'category-button'"
                      @click="debouncedHandle('all')">
                全部
              </button>
              <button v-for="item in categories"
                      :key="item.categoryId"
                      :class="nowCategory[0]===item.categoryName?'now-category-button':'category-button'"
                      @click="debouncedHandle(item.categoryName)">
                {{ item.categoryName }}
              </button>
            </div>
          </div>

          <!-- 热门推荐 -->
          <div class="mb-8">
            <div class="flex items-center justify-left mb-4">
              <h2 class="text-xl font-bold">热门推荐</h2>
            </div>

            <!-- 文章列表 -->
            <div
                v-infinite-scroll="loadMore"
                :infinite-scroll-delay="500"
                :infinite-scroll-disabled="!hasMore || isLoading"
                :infinite-scroll-distance="300"
                style="height: 1200px; overflow:auto; margin-bottom: 4px"
            >
              <div
                  v-for="(article, index) in articles"
                  :key="article.articleId"
                  @click="router.push({name:'article',params:{articleId:article.articleId}})"
                  class="bg-white rounded-lg shadow-sm p-4 hover:translate-y-[-5px] transition-transform duration-300 "
              >
                <div class="flex justify-between">
                  <div class="flex-1 pr-4">
                    <h3 class="font-semibold mb-2 hover:text-blue-600 transition-colors line-clamp-1">
                      {{ article.title }}
                    </h3>
                    <p class="text-gray-500 text-sm mb-3 line-clamp-2">{{ article.summary }}</p>
                    <div class="flex flex-wrap items-center text-sm text-gray-500 gap-x-4 gap-y-1">
                      <div class="flex items-center">
                        <img :src="article.avatar" alt="作者头像" class="w-5 h-5 rounded-full mr-1">
                        <span>{{ article.username }}</span>
                      </div>
                      <span>{{ article.publishTime }}</span>
                      <div class="flex flex-wrap gap-1 mt-1">
                        <span
                            v-for="(tag, i) in article.category"
                            :key="i"
                            class="bg-gray-100 text-gray-500 px-2 py-0.5 rounded text-xs"
                        >
                          {{ tag }}
                        </span>
                      </div>
                      <div class="flex items-center">
                        <i class="fa fa-eye mr-1"></i>
                        <HeartIcon/>
                        <span>{{ article.likeCount }}</span>
                      </div>
                      <div class="flex items-center">
                        <i class="fa fa-comment mr-1"></i>
                        <el-icon>
                          <ChatDotRound/>
                        </el-icon>
                        <span>{{ article.commentCount }}</span>
                      </div>
                      <div class="flex items-center">
                        <i class="fa fa-eye mr-1"></i>
                        <el-icon>
                          <View/>
                        </el-icon>
                        <span>{{ article.viewCount }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div v-if="!hasMore">
                <p style="text-align: center;color:#999;margin-top:20px ">已经到底啦~</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 右侧边栏 -->
        <div class="lg:w-1/3 space-y-6">
          <!-- 登录卡片 -->
          <div v-if="!isLoggedIn" class="bg-white rounded-lg shadow-sm p-5 text-center">
            <div class="mb-4">
              <img
                  alt="默认头像"
                  class="w-16 h-16 rounded-full mx-auto mb-2 border-2 border-gray-200"
                  src="https://seecen-devplatform.oss-cn-hangzhou.aliyuncs.com/defaultAvatar.jpg"
              >
              <p class="text-gray-500">登录后享受更多功能</p>
            </div>
            <div class="flex flex-col space-y-2">
              <button
                  class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md transition-colors"
                  @click="router.push('/login')"
              >
                立即登录
              </button>
              <button
                  class="border border-blue-600 text-blue-600 hover:bg-blue-50 px-4 py-2 rounded-md transition-colors"
                  @click="router.push('/register')"
              >
                免费注册
              </button>
            </div>
            <div class="mt-4 text-xs text-gray-500">
              登录即代表同意
              <a class="text-blue-600 hover:underline" href="#">用户协议</a>
              和
              <a class="text-blue-600 hover:underline" href="#">隐私政策</a>
            </div>
          </div>

          <!--右侧广告页面 -->
          <div v-if="isLoggedIn && !isLoginAdClosed && loggedAds.length > 0"
               class="ad-container bg-blue-50 py-4 rounded-lg overflow-hidden">
            <div class="p-2">
              <!-- 右侧轮播容器 -->
              <el-carousel
                  height="180px"
                  :autoplay="true"
                  :interval="6000"
                  arrow="hover"
                  class="sidebar-carousel"
                  @change="handleSidebarCarouselChange"
              >
                <!-- 轮播项 -->
                <el-carousel-item v-for="ad in loggedAds" :key="ad.id" class="sidebar-carousel-item">
                  <div
                      class="bg-gradient-to-r from-purple-600 to-pink-500 rounded-lg overflow-hidden relative h-full flex items-center"
                      @click="handleAdClick(ad)"
                  >
                    <!-- 广告标签和关闭按钮 -->
                    <div class="absolute top-2 right-2 flex items-center gap-1 z-20">
                      <div class="ad-label bg-gray-800/80 text-white text-xs px-2 py-1 rounded backdrop-blur-sm">广告
                      </div>
                      <div
                          class="close-btn cursor-pointer hover:bg-black/20 p-1 rounded-full transition-colors text-white"
                          @click.stop="closeLoginAd"
                      >
                        <svg fill="currentColor" height="14" viewBox="0 0 16 16" width="14"
                             xmlns="http://www.w3.org/2000/svg">
                          <path
                              d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
                    </svg>
                  </div>
                </div>

                    <!-- 广告背景 -->
                    <div class="absolute inset-0 opacity-20">
                      <div
                          class="absolute inset-0 bg-cover bg-center"
                          :style="ad.imageUrl ? `background-image: url(${ad.imageUrl})` : 'background-gradient-to-r from-purple-700 to-pink-600'"
                      ></div>
                </div>

                    <!-- 广告内容 -->
                    <div class="relative z-10 flex flex-col h-full w-full p-4">
                      <!-- 文本区域 -->
                      <div class="text-white text-center md:text-left">
                        <h3 class="text-lg font-bold mb-2">{{ ad.title }}</h3>
                        <p class="opacity-90 text-sm mb-3 line-clamp-2">{{ ad.description }}</p>
                      </div>

                      <!-- 按钮区域：固定在右侧 -->
                      <div class="flex justify-end mt-auto">
                        <button
                            class="bg-white text-purple-600 hover:bg-gray-100 px-4 py-1.5 rounded-md text-sm font-medium transition-all transform hover:scale-105">
                          {{ ad.buttonText || '了解更多' }}
                        </button>
                      </div>
                    </div>
                  </div>
                </el-carousel-item>
              </el-carousel>
            </div>
          </div>

          <!-- 推荐博主 -->
          <div class="bg-white rounded-lg shadow-sm p-5">
            <div class="flex items-center justify-between mb-4">
              <h3 class="font-bold">推荐博主</h3>
              <a class="text-blue-600 hover:underline text-sm" href="#">换一批</a>
            </div>
            <div class="space-y-4">
              <div
                  v-for="(blogger, index) in bloggers"
                  :key="index"
                  class="flex items-center justify-between"
              >
                <div class="flex items-center">
                  <img :src="blogger.avatar" alt="博主头像" class="w-10 h-10 rounded-full mr-3">
                  <div>
                    <p class="font-medium text-sm">{{ blogger.name }}</p>
                    <p class="text-gray-500 text-xs">{{ blogger.specialty }}</p>
                  </div>
                </div>
                <button
                    class="text-blue-600 border border-blue-600 hover:bg-blue-50 px-2 py-0.5 rounded text-xs transition-colors">
                  关注
                </button>
              </div>
            </div>
            <div class="mt-4 text-center">
              <a class="text-blue-600 hover:underline text-sm" href="#">查看更多</a>
            </div>
          </div>

        </div>
      </div>
    </main>

    <!-- 底部 -->
    <footer class="bg-gray-900 text-white mt-10">
      <div class="container mx-auto px-4 py-10">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
          <div>
            <h4 class="text-lg font-bold mb-4 flex items-center">
              <i class="fa fa-code mr-2"></i> DevCommunity
            </h4>
            <p class="text-gray-400 text-sm mb-4">
              致力于为开发者提供优质的技术内容、学习资源和交流平台，助力开发者成长。
            </p>
            <div class="flex space-x-4">
              <a class="text-gray-400 hover:text-white transition-colors" href="#">
                <i class="fa fa-github text-xl"></i>
              </a>
              <a class="text-gray-400 hover:text-white transition-colors" href="#">
                <i class="fa fa-twitter text-xl"></i>
              </a>
              <a class="text-gray-400 hover:text-white transition-colors" href="#">
                <i class="fa fa-linkedin text-xl"></i>
              </a>
              <a class="text-gray-400 hover:text-white transition-colors" href="#">
                <i class="fa fa-weixin text-xl"></i>
              </a>
            </div>
          </div>

          <div>
            <h4 class="font-bold mb-4">内容资源</h4>
            <ul class="space-y-2 text-gray-400">
              <li><a class="hover:text-white transition-colors" href="#">博客</a></li>
              <li><a class="hover:text-white transition-colors" href="#">教程</a></li>
              <li><a class="hover:text-white transition-colors" href="#">问答</a></li>
              <li><a class="hover:text-white transition-colors" href="#">代码库</a></li>
              <li><a class="hover:text-white transition-colors" href="#">电子书</a></li>
            </ul>
          </div>

          <div>
            <h4 class="font-bold mb-4">社区服务</h4>
            <ul class="space-y-2 text-gray-400">
              <li><a class="hover:text-white transition-colors" href="#">关于我们</a></li>
              <li><a class="hover:text-white transition-colors" href="#">联系我们</a></li>
              <li><a class="hover:text-white transition-colors" href="#">帮助中心</a></li>
              <li><a class="hover:text-white transition-colors" href="#">用户协议</a></li>
              <li><a class="hover:text-white transition-colors" href="#">隐私政策</a></li>
            </ul>
          </div>

          <div>
            <h4 class="font-bold mb-4">订阅更新</h4>
            <p class="text-gray-400 text-sm mb-4">
              订阅我们的周刊，获取最新技术资讯和优质内容推荐
            </p>
            <div class="flex">
              <el-input
                  v-model="email"
                  class="bg-gray-800 border-gray-700 text-white rounded-r-none"
                  clearable
                  placeholder="输入您的邮箱"
              ></el-input>
              <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 rounded-l-none transition-colors">
                订阅
              </button>
            </div>
          </div>
        </div>

        <div class="border-t border-gray-800 mt-8 pt-6 text-center text-gray-500 text-sm">
          <p>© 2023 DevCommunity. 保留所有权利。</p>
        </div>
      </div>
    </footer>
  </div>
  <!--  回到顶部-->
  <el-popover
      content="回到顶部"
      placement="left"
  >
    <template #reference>
      <el-backtop :bottom="100" :right="30"/>
    </template>
  </el-popover>
  <!-- 历史记录列表-->
  <el-drawer v-model="readeHistoryVisible" title="历史记录" @close="searchTitle=''" @open="getReadeHistory">
    <div class="reade-history-delete">
      <el-popconfirm
          cancel-button-text="取消"
          confirm-button-text="确认"
          placement="left-end"
          title="删除所有历史记录？"
          @confirm="deleteReadeHistory"
      >
        <template #reference>
          <el-icon>
            <Delete/>
          </el-icon>
        </template>
      </el-popconfirm>
    </div>
    <el-input v-model="searchTitle"
              class="history-search"
              placeholder="请输入文章标题"
              @change="getReadeHistory"
    >
      <template #prepend>
        <el-icon>
          <Search/>
        </el-icon>
      </template>
    </el-input>
    <div v-show="readeHistoryList.length" class="reade-history-list">
      <el-row justify="space-between"
              style="text-align: center;font-weight: bold;margin-bottom: 10px;">
        <el-col :span="17" class="reade-history-list-title">
          <span>标题</span>
        </el-col>
        <el-col :offset="1" :span="6" class="reade-history-list-time" style="text-align: center">
          <span>时间</span>
        </el-col>
      </el-row>
      <el-row
          v-for="(item,index) in readeHistoryList"
          class="reade-history-list-item"
          justify="space-between"
          @click="router.push({name:'article',params:{articleId:item.articleId}})"
      >
        <el-col :span="17" class="reade-history-list-title">
          {{ item.title }}
        </el-col>
        <el-col :offset="1" :span="6" class="reade-history-list-time">
          {{ item.readTime }}
        </el-col>
      </el-row>
    </div>
    <div v-show="!readeHistoryList.length">
      <p style="color: #999;text-align: center;margin-top: 30px">
        暂时没有记录哦~
      </p>
    </div>

  </el-drawer>
</template>

<style scoped>

/*头像菜单样式*/
.avatar-div {
  display: inline-block;
  position: relative;
  padding: 8px;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 20px
}

.avatar-menu {
  position: absolute;
  background-color: white;
  width: 130px;
  top: 100%;
  left: 0;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.avatar-menu span {
  font-size: 12px;
}

/*历史记录样式*/
.reade-history-list {
  overflow: auto;
  font-size: 15px;
}

.reade-history-delete {
  width: 100%;
  display: flex;
  justify-content: end;
  transition: all 0.3s ease;
}

.reade-history-delete:hover {
  color: #ec1717;
}

.history-search {
  margin: 10px 0;
}

.history-search :deep(.el-input-group__prepend) {
  background-color: white;
  padding: 5px 15px;
}

.reade-history-list-item {
  width: 95%;
  left: 8px;
  overflow: visible;
  margin-bottom: 5px;
  transition: all 0.3s ease;
}

.reade-history-list-item:hover {
  transform: scale(1.02);
}

.reade-history-list-time {
  text-align: end;
}

.reade-history-list-title {
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏超出容器的内容 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}

.category-button {
  background-color: white;
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 13px;
}

.category-button:hover {
  border-radius: 15px;
  background-color: #eee;
}

.now-category-button {
  background-color: #2563eb;
  color: white;
  padding: 5px 10px;
  font-size: 13px;
  border-radius: 15px;
}
</style>